<template>
    <!-- 表单 -->
    <el-form :inline="true" class="search-form">
        <div class="search-form-items">
            <el-form-item label="班级名称">
                <el-input v-model="params.classroomName" placeholder="请输入要搜索班级名称" />
            </el-form-item>
            <el-form-item label="班级类型">
                <el-input v-model="params.classroomType" placeholder="请输入要搜索班级类型" />
            </el-form-item>
            <el-form-item label="班级状态">
                <el-select v-model="params.status" placeholder="请选择班级状态" clearable>
                    <el-option label="未发布" :value="0" />
                    <el-option label="报名中" :value="1" />
                    <el-option label="已开课" :value="2" />
                    <el-option label="已结业" :value="3" />
                </el-select>
            </el-form-item>
        </div>
        <div class="search-form-buttons">
            <el-form-item>
                <el-button @click="onSearch" plain>搜索</el-button>
                <el-button @click="onReset" plain type="info">重置</el-button>
                <el-button @click="onAddClassroom" plain type="success">新增</el-button>
            </el-form-item>
        </div>
    </el-form>
    <!-- 表格 -->
    <el-table height="526px" :data="classroomList">
        <el-table-column align="center" prop="classroomId" label="班级id" />
        <el-table-column align="center" prop="classroomName" label="班级名称" />
        <el-table-column align="center" prop="classroomType" label="班级类型" />
        <el-table-column align="center" prop="creatorName" label="创建人名称" />
        <el-table-column align="center" prop="createTime" label="创建时间" />
        <el-table-column align="center" label="状态">
            <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)">
                    {{ getStatusText(row.status) }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200px" fixed="right">
            <template #default="{ row }">
                <el-button v-if="row.status !== 0" type="text" @click="manage(row.classroomId, row.classroomName)">管理
                </el-button>
                <el-button type="text" @click="onEdit(row.classroomId)">编辑
                </el-button>
                <el-button type="text" class="red" @click="onDelete(row.classroomId)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination background size="small" layout="total, sizes, prev, pager, next, jumper" :total="total"
        v-model:current-page="params.pageNum" v-model:page-size="params.pageSize" :page-sizes="[5, 10, 20, 50]"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <classroom-drawer ref="classroomEditRef" @success="onSuccess"></classroom-drawer>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { getClassroomListService, delClassroomService } from '@/apis/classroom'
import ClassroomDrawer from "@/components/drawer/ClassroomDrawer.vue"
import router from "@/router"


const params = reactive({
    pageNum: 1,
    pageSize: 10,
    classroomName: '',
    classroomType: '',
    status: ''
})

const classroomEditRef = ref()
const classroomList = ref([])
const total = ref(0)

async function getClassroomList() {
    const ref = await getClassroomListService(params)
    classroomList.value = ref.rows
    total.value = ref.total
}
getClassroomList()

function onSearch() {
    params.pageNum = 1
    getClassroomList()
}

function onReset() {
    params.pageNum = 1
    params.pageSize = 10
    params.classroomName = ''
    params.classroomType = ''
    params.status = ''
    getClassroomList()
}

function handleSizeChange(newSize) {
    params.pageNum = 1
    getClassroomList()
}

function handleCurrentChange(newPage) {
    getClassroomList()
}


// 添加教师
const onAddClassroom = () => {
    classroomEditRef.value.open()
}


function onSuccess(service) {
    if (service === 'add') {
        params.pageNum = 1
    }
    getClassroomList()
}

async function onDelete(classroomId) {
    const isConfirmed = window.confirm("确定要删除该班级吗？");
    if (isConfirmed) {
        // 用户点击确认
        await delClassroomService(classroomId);
        params.pageNum = 1;
        getClassroomList();
    } else {
        // 用户点击取消
        console.log("删除操作已取消");
    }
}
async function onEdit(classroomId) {
    classroomEditRef.value.open(classroomId)
}

function manage(classroomId, classroomName) {
    const encodedName = encodeURIComponent(classroomName);
    router.push(`/tims/layout/classroomMange?classroomId=${classroomId}&classroomName=${encodedName}`)
}

function getStatusText(status) {
    const statusMap = {
        0: '未发布',
        1: '报名中',
        2: '已开课',
        3: '已结业'
    }
    return statusMap[status] || '未知状态'
}

function getStatusType(status) {
    const typeMap = {
        0: 'info',    // 未发布：灰色
        1: 'success', // 报名中：绿色
        2: 'warning', // 已开课：黄色
        3: 'danger'   // 已结业：红色
    }
    return typeMap[status] || ''
}
</script>

<style scoped>
/* 添加响应式表单样式 */
.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 20px;
}

.search-form-items {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

.search-form-buttons {
  display: flex;
  align-items: flex-start;
  margin-left: auto;
}

.search-form :deep(.el-form-item) {
  margin-right: 20px;
  margin-bottom: 10px;
  min-width: 220px;
}

.search-form :deep(.el-select), 
.search-form :deep(.el-input) {
  width: 220px;
}

@media (max-width: 1200px) {
  .search-form {
    flex-direction: column;
  }
  
  .search-form-buttons {
    margin-left: 0;
    margin-top: 10px;
  }
}
</style>